{% extends 'base.html' %}
{% load static %}

{% block title %}队伍token{% endblock %}

{% block style %}
    <!-- Bootstrap Core CSS -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="{% static 'css/helper.css' %}" rel="stylesheet">
    <link href="{% static 'css/style.css' %}" rel="stylesheet">
    <link href="{% static 'css/semantic.ui.min.css' %}" rel="stylesheet">
    <style rel="stylesheet">
        .ui.compact.table td {
            font-size: 1em;
            padding-top: 0.2em;
            padding-bottom: 0.2em;
            color: #000;
        }
    </style>
{% endblock %}

{% block body %}
    <body class="fix-header fix-sidebar">
    <!-- Preloader - style you can find in spinners.css -->
    <div class="preloader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        </svg>
    </div>
    <!-- Main wrapper  -->
    <div id="main-wrapper">

        <div class="unix-login">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-lg-8">

                        <div class="card" style="margin-top: 30px;opacity: .70;">
                            <table class="ui red compact table"><h3
                                    style="-ms-text-align-last: center;text-align-last: center;: center;">Tokens</h3>
                                <thead>
                                <tr>
                                    <th>队伍名称</th>
                                    <th>队队token</th>
                                    <th>靶机状态</th>
                                </tr>
                                </thead>
                                <tbody id="tab1">
                                <tr>
                                    <td>蘋果</td>
                                    <td>200</td>
                                    <td>0 克</td>
                                </tr>
                                <tr>
                                    <td>Orange</td>
                                    <td>310</td>
                                    <td>0 克</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- End Wrapper -->
    <!-- All Jquery -->
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="{% static 'js/jquery.slimscroll.js' %}"></script>
    <!--stickey kit -->
    <script src="{% static 'js/sticky-kit.min.js' %}"></script>
    <!--Custom JavaScript -->
    <script src="{% static 'js/custom.min.js' %}"></script>
    <script src="{% static 'js/semantic.ui.min.js' %}"></script>
    </body>
    <script>
        function reload(url, tableid) {
            h1 = $.ajax({url: url, async: false}).responseText;
            $('#'+tableid).html(h1);
            console.log(h1);
        }


        $(document).ready(function () {
            reload('/api5/','tab1');
            setInterval("reload('/api5/','tab1')", 500000);
            //setTimeout(function(){AutoReload();}, 1000);
        });
    </script>
{% endblock %}

